/* docs/stylesheets/extra.css */
.md-grid {
    max-width: 100%; /* Example: Set a specific maximum width */
    /* or */
    /* max-width: 100%; */ /* Example: Stretch to full available width */
}
/* .img-card img {
    width: 100%;
    height: 250px;      
    object-fit: cover;
} */
/* .md-sidebar--primary, */
/* .md-sidebar--secondary {
  display: none;
} */
.md-main__inner {
    max-width: 100% !important;
    margin: 0;
}

.md-content {
    max-width: 100% !important;
    margin: 0;
}
.md-content h1:first-of-type {
    display: none;
}
/* .card-image {
    width: 100%;
    height: 200px;       
    object-fit: cover;   
    border-radius: 6px 6px 0 0; 
    display: block;
} */

.md-typeset .grid.cards .card img.card-image {
    width: 100% !important;
    height: 200px !important;      /* samakan tinggi */
    object-fit: cover !important;  /* crop biar proporsional */
    border-radius: 6px 6px 0 0;
    display: block;
  }

/* @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
font-family: "Playfair Display", serif !important;
}  */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important; /* bold */
}

/* Card Labels Styling */
.card-labels {
  margin: 12px 0 8px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.label {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 12px;
  color: white;
  text-decoration: none;
  transition: all 0.2s ease;
}

.label:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Label Categories */
.label-devops {
  background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
}

.label-containerization {
  background: linear-gradient(135deg, #4ECDC4, #44A08D);
}

.label-programming {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.label-dotnet {
  background: linear-gradient(135deg, #512DA8, #673AB7);
}

.label-backend {
  background: linear-gradient(135deg, #FF9800, #FF5722);
}

.label-linux {
  background: linear-gradient(135deg, #2E7D32, #388E3C);
}

.label-os {
  background: linear-gradient(135deg, #1976D2, #1565C0);
}

.label-terminal {
  background: linear-gradient(135deg, #424242, #616161);
}