/* Pola 1: navbar space-between */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgb(15, 23, 42);
  color: rgb(255, 255, 255);
}
.merek { font-weight: 700; }
.menu {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Pola 2: perfect centering */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background: rgb(241, 245, 249);
}
.kotak-sapa {
  padding: 24px 32px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  font-weight: 700;
}
/* Pola 3: media object */
.media {
  display: flex;
  gap: 12px;
  width: 420px;
}
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgb(94, 234, 212);
  flex-shrink: 0;          /* avatar tidak ikut menyusut */
}
.media-body { flex: 1; min-width: 0; }
.media-judul { font-weight: 700; margin-bottom: 4px; }
/* Pola 4: kartu dengan footer terdorong */
.kartu {
  display: flex;
  flex-direction: column;
  width: 260px;
  height: 190px;
  border: 1px solid rgb(226, 232, 240);
  background: rgb(255, 255, 255);
}
.isi-kartu { flex: 1; padding: 16px; }
.kaki-kartu {
  display: flex;
  padding: 12px 16px;
  border-top: 1px solid rgb(226, 232, 240);
}
.tombol-polos { color: rgb(71, 85, 105); }
.tombol-utama {
  margin-left: auto;       /* didorong ke ujung kanan */
  padding: 6px 14px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  border-radius: 6px;
  font-weight: 700;
}