:root{
  --bmn-yellow:#f7c600;   /* kuning buminet */
  --bmn-yellow-2:#ffda2a;
  --bmn-dark:#0b1220;
  --bmn-muted:#6b7280;
  --bmn-card:#ffffff;
  --bmn-border:#e5e7eb;
}

body{
  background: #f7f7f7;
  color:#111827;
}

.brand-wrap{
  text-align:center;
  padding-top: 28px;
  padding-bottom: 10px;
}
.brand-title{
  font-weight: 800;
  letter-spacing: .2px;
  margin: 10px 0 4px 0;
}
.brand-sub{
  color: var(--bmn-muted);
  font-size: .95rem;
  margin:0;
}

.page-shell{
  max-width: 1050px;
}

.card-pack{
  border: 1px solid var(--bmn-border);
  border-radius: 16px;
  background: var(--bmn-card);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  overflow:hidden;
  position:relative;
  height: 100%;
}

.card-pack .card-body{
  padding: 18px 18px 16px 18px;
}

.pack-name{
  font-weight: 800;
  margin-bottom: 6px;
  font-size: 1.05rem;
}

.pack-meta{
  color: var(--bmn-muted);
  font-size: .95rem;
  margin-bottom: 10px;
}

.pack-price{
  font-size: 1.25rem;
  font-weight: 900;
  margin-bottom: 14px;
}

.btn-bmn{
  background: var(--bmn-yellow);
  border: none;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 12px;
  width: 100%;
}
.btn-bmn:hover{
  background: var(--bmn-yellow-2);
}

.btn-outline-bmn{
  background-color: #ffffff;
  color: #1f2937;
  border: 2px solid #f4cf45;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  flex: 1;
}
.btn-outline-bmn:hover{
  background-color: #fff9db;
}

/* Recommended highlight (Go Lite) */
.recommended{
  border: 2px solid var(--bmn-yellow);
  box-shadow: 0 10px 30px rgba(247, 198, 0, .25);
}
.recommended::before{
  content:"BEST DEAL";
  position:absolute;
  top: 14px;
  right: -42px;
  transform: rotate(45deg);
  background: var(--bmn-yellow);
  color:#111827;
  font-weight: 900;
  font-size: .72rem;
  padding: 6px 52px;
  letter-spacing:.6px;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

.footer-note{
  color: var(--bmn-muted);
  font-size: .9rem;
  text-align:center;
  margin-top: 18px;
  padding-bottom: 28px;
}

/* Mobile spacing */
@media (max-width: 576px){
  .brand-title{ font-size: 1.5rem; }
  .brand-sub{ font-size: .92rem; }
}

.voucher-box{
  border:1px dashed rgba(0,0,0,.25);
  border-radius:14px;
  padding:14px;
}

.voucher-code{
  font-size:22px;
  font-weight:900;
  letter-spacing:1px;
}

.badge-ok{ background:#ecfdf5; color:#065f46; }
.badge-warn{ background:#fffbeb; color:#92400e; }
.badge-bad{ background:#fef2f2; color:#991b1b; }

.cta-stack .btn {
  border-radius: 12px;
  font-weight: 600;
}

.btn-lg {
  padding: 14px 18px;
  font-size: 1rem;
}