body {
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */ /* Removed to inherit from css/styles.css */
    /* background-color: #f7f7f7; */ /* Let styles.css handle body background if possible, or ensure consistency */
    margin: 0;
    padding: 0;
}

.berita-container {
    /* max-width: 1000px; */ /* Using Bootstrap's .container class should handle this */
    /* margin: 40px 0 40px 60px; */ /* Replaced with standard Bootstrap container behavior */
    /* padding: 0 20px; */ /* Replaced with standard Bootstrap container behavior */
    padding-top: 2rem; /* Add some space from the header/divider */
    padding-bottom: 2rem; /* Add some space before the footer */
}

/* .berita-container h1 is not used, page-section-heading is used in blog.php */
/* If a specific h1 style for blog page is needed, it can be added back */
/* For example:
.berita-container > h1 {
    text-align: center;
    color: #4b0082;
    margin-bottom: 30px;
}
*/

/* The h2 inside .page-section already has styling from styles.css */
/* No need to override .page-section-heading unless for specific blog page changes */

.card-berita {
    display: flex;
    background-color: #fff;
    margin-bottom: 20px; /* Consider using Bootstrap's mb-* classes in HTML if consistent spacing is desired */
    border-radius: 10px; /* Bootstrap's .rounded class can also be used */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); /* Bootstrap's .shadow-sm or .shadow can be used */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-berita:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

.card-berita {
    display: flex;
    background-color: #fff;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.gambar-berita {
    width: 200px;
    height: 130px;
    object-fit: cover;
}

.konten-berita {
    padding: 15px;
    flex: 1;
    display: flex; /* Added for flex layout */
    flex-direction: column; /* Stack items vertically */
}

.konten-berita .deskripsi {
    flex-grow: 1;
}

.konten-berita .btn {
    margin-top: auto;
    align-self: flex-start;
}

.judul { /* This class is applied to h3 elements in blog.php cards */
    /* font-size: 20px; */ /* Use h2 default from styles.css or Bootstrap fs-* classes */
    color: #333; /* Retaining color for now, can be standardized later if needed */
    margin: 0 0 10px 0;
}

.tanggal { /* This class is applied to p elements for dates */
    /* font-size: 14px; */ /* Suggest using <small> tag in HTML for this */
    color: #888; /* Retaining color for now */
    margin-bottom: 10px;
}

.deskripsi { /* This class is applied to p elements for descriptions */
    /* font-size: 16px; */ /* Should inherit base body font size (1rem) */
    color: #444; /* Retaining color for now */
    /* line-height: 1.6; */ /* Should inherit base line-height (1.5) or be slightly adjusted if necessary */
    /* text-align: justify; */ /* Removed to allow default left-alignment */
}