body {
    font-family: 'Inter', sans-serif;
    background: #ffffff;
    min-height: 100vh;
}

/* Header Section */
.berita-header {
    text-align: center;
    padding: 120px 20px 40px; /* Top padding to clear fixed header */
}

.berita-eyebrow {
    margin: 0 0 10px;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #b81515;
}

.berita-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #000;
    margin: 0 0 10px;
}

.berita-subtitle {
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.6;
    color: #494949;
    max-width: 600px;
    margin: 0 auto;
}

/* Grid Section */
.berita-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 Columns */
    grid-auto-rows: auto; /* Allow auto rows */
    gap: 20px;
    padding: 20px 2%; /* Reduced side padding */
    max-width: 1800px; /* Increased max-width */
    margin: 0 auto 80px;
}

/* Card Styles */
.berita-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background-color: #000; /* Fallback */
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.berita-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.berita-card:hover .berita-card-bg {
    transform: scale(1.05);
}

/* Gradient Overlay */
.berita-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}

/* Content inside Card */
.berita-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    z-index: 2;
}

.berita-card-title {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 5px;
    line-height: 1.2;
}

.berita-card-desc {
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem;
    margin: 0;
    font-weight: 400;
}

/* --- Row 1 & 2 (Original) --- */

/* Row 1: Left Wide Card (Cols 1-3) */
.berita-card-wide {
    grid-column: 1 / span 3;
    grid-row: 1;
    min-height: 350px;
}

.berita-card-wide .berita-card-title {
    font-size: 1.75rem;
}

/* Row 1 & 2: Tall Card (Col 4) */
.berita-card-tall {
    grid-column: 4;
    grid-row: 1 / span 2;
    min-height: 600px;
    height: 100%;
}

.berita-card-tall .berita-card-title {
    font-size: 1.5rem;
}

/* Row 2: Bottom Small Cards (Cols 1-3) */
.berita-card-small {
    grid-row: 2;
    grid-column: span 1;
    min-height: 250px;
}

/* Row 2: Medium Card (Spans 2 columns) */
.berita-card-medium {
    grid-row: 2;
    grid-column: span 2;
    min-height: 250px;
}

.berita-card-medium .berita-card-title {
    font-size: 1.4rem;
}

/* New Right Column (Col 5) */
.berita-card-side-top {
    grid-column: 5;
    grid-row: 1;
    min-height: 300px;
}

.berita-card-side-bottom {
    grid-column: 5;
    grid-row: 2;
    min-height: 250px;
}


/* --- Row 3, 4, 5 (New "Messy" Layout) --- */

/* Row 3: Large Box (Left, spans 2 cols, 2 rows) */
.berita-card-large-box {
    grid-column: 1 / span 2;
    grid-row: 3 / span 2;
    min-height: 520px; /* 250 + 250 + 20 gap */
}
.berita-card-large-box .berita-card-title {
    font-size: 1.75rem;
}

/* Row 3: Wide Strip (Right, spans 3 cols) */
.berita-card-r3-wide {
    grid-column: 3 / span 3;
    grid-row: 3;
    min-height: 250px;
}

/* Row 4: Small (Middle) */
.berita-card-r4-small {
    grid-column: 3;
    grid-row: 4;
    min-height: 250px;
}

/* Row 4: Medium (Right, spans 2 cols) */
.berita-card-r4-medium {
    grid-column: 4 / span 2;
    grid-row: 4;
    min-height: 250px;
}

/* Row 5: Small 1 (Left) */
.berita-card-r5-small-1 {
    grid-column: 1;
    grid-row: 5;
    min-height: 250px;
}

/* Row 5: Small 2 (Left-Center) */
.berita-card-r5-small-2 {
    grid-column: 2;
    grid-row: 5;
    min-height: 250px;
}

/* Row 5: Wide (Right, spans 3 cols) */
.berita-card-r5-wide {
    grid-column: 3 / span 3;
    grid-row: 5;
    min-height: 250px;
}


/* --- Row 6, 7, 8 (More Messy Layout) --- */

/* Row 6: Tall Slim (Left, spans 1 col, 2 rows) */
.berita-card-r6-tall {
    grid-column: 1;
    grid-row: 6 / span 2;
    min-height: 520px;
}

/* Row 6: Big Square (Middle, spans 2 cols, 2 rows) */
.berita-card-r6-square {
    grid-column: 2 / span 2;
    grid-row: 6 / span 2;
    min-height: 520px;
}
.berita-card-r6-square .berita-card-title {
    font-size: 1.6rem;
}

/* Row 6: Stacked 1 (Right, spans 2 cols) */
.berita-card-r6-stack-1 {
    grid-column: 4 / span 2;
    grid-row: 6;
    min-height: 250px;
}

/* Row 7: Stacked 2 (Right, spans 2 cols) */
.berita-card-r7-stack-2 {
    grid-column: 4 / span 2;
    grid-row: 7;
    min-height: 250px;
}

/* Row 8: Wide Panoramic (Spans full 5 cols) */
.berita-card-r8-panoramic {
    grid-column: 1 / span 5;
    grid-row: 8;
    min-height: 350px;
}
.berita-card-r8-panoramic .berita-card-title {
    font-size: 2rem;
}


/* Responsive */
@media (max-width: 1200px) {
    .berita-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(250px, auto);
    }

    /* Reset specific grid placements */
    .berita-card-wide,
    .berita-card-tall,
    .berita-card-small,
    .berita-card-medium,
    .berita-card-side-top,
    .berita-card-side-bottom,
    .berita-card-large-box,
    .berita-card-r3-wide,
    .berita-card-r4-small,
    .berita-card-r4-medium,
    .berita-card-r5-small-1,
    .berita-card-r5-small-2,
    .berita-card-r5-wide,
    .berita-card-r6-tall,
    .berita-card-r6-square,
    .berita-card-r6-stack-1,
    .berita-card-r7-stack-2,
    .berita-card-r8-panoramic {
        grid-column: auto;
        grid-row: auto;
        min-height: 250px;
    }

    /* Tablet Specific Layout Hints (Optional, simple stacking preferred for robustness) */
    .berita-card-wide { grid-column: span 3; }
    .berita-card-tall { grid-column: span 2; grid-row: span 2; }
    .berita-card-large-box { grid-column: span 2; grid-row: span 2; }
    .berita-card-r3-wide { grid-column: span 3; }
    .berita-card-r5-wide { grid-column: span 3; }
    .berita-card-r6-square { grid-column: span 2; grid-row: span 2; }
    .berita-card-r8-panoramic { grid-column: span 3; }
}

@media (max-width: 768px) {
    .berita-grid {
        grid-template-columns: 1fr;
    }
    
    .berita-card-wide,
    .berita-card-tall,
    .berita-card-small,
    .berita-card-medium,
    .berita-card-side-top,
    .berita-card-side-bottom,
    .berita-card-large-box,
    .berita-card-r3-wide,
    .berita-card-r4-small,
    .berita-card-r4-medium,
    .berita-card-r5-small-1,
    .berita-card-r5-small-2,
    .berita-card-r5-wide {
        grid-column: 1;
        grid-row: auto;
        min-height: 250px;
    }
}