/* SmartBazar@MBIP — penjenamaan halaman utama (warna logo MBIP) */

:root {
  --accent-color: #2B3A8F;
  --heading-color: #141C4B;
  --nav-color: #2A2F45;
  --nav-hover-color: #2B3A8F;
  --nav-dropdown-hover-color: #2B3A8F;
  --sb-gold: #E9A400;
}

.sitename { letter-spacing: .2px; }
.sitename em { font-style: normal; color: var(--sb-gold); }

.header .btn-getstarted,
.header .btn-getstarted:focus {
  background: var(--sb-gold);
  color: #23262e;
  font-weight: 600;
}
.header .btn-getstarted:hover { background: #D19400; color: #23262e; }

/* Kad log masuk di atas hero */
.sb-hero-card {
  background: rgba(255, 255, 255, .96);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 18px 40px rgba(10, 16, 45, .28);
  max-width: 420px;
}
.sb-hero-card h3 { font-size: 18px; font-weight: 700; color: #141C4B; margin-bottom: 4px; }
.sb-hero-card p.sb-sub { font-size: 13px; color: #6B7280; margin-bottom: 18px; }
.sb-hero-card .form-label { font-size: 13px; font-weight: 600; color: #414759; }
.sb-hero-card .form-control { border: 1px solid #D9DEEC; border-radius: 8px; padding: 9px 12px; }
.sb-hero-card .form-control:focus { border-color: #2B3A8F; box-shadow: 0 0 0 3px rgba(43, 58, 143, .12); }
.sb-hero-card .btn-primary {
  background: #2B3A8F; border-color: #2B3A8F; border-radius: 8px; font-weight: 600; padding: 10px;
}
.sb-hero-card .btn-primary:hover { background: #22307A; border-color: #22307A; }
.sb-hero-card .sb-links { font-size: 13px; }
.sb-hero-card .sb-links a { color: #2B3A8F; font-weight: 600; text-decoration: none; }

.hero h2 { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.hero h2 em { font-style: normal; color: var(--sb-gold); }
.hero .sb-tagline {
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
  max-width: 560px;
}

/* Jalur aliran permohonan */
.sb-langkah { background: #F4F6FB; }
.sb-langkah .sb-kad {
  background: #fff; border: 1px solid #E6E9F2; border-radius: 12px; padding: 18px; height: 100%;
}
.sb-langkah .sb-no {
  width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center;
  background: #EEF1FA; color: #2B3A8F; font-weight: 700; font-size: 13px; margin-bottom: 10px;
}
.sb-langkah .sb-kad h4 { font-size: 15px; font-weight: 700; color: #1F2430; margin: 0 0 4px; }
.sb-langkah .sb-kad p { font-size: 13px; color: #6B7280; margin: 0; }

.footer .sitename { color: var(--heading-color); }

/* ---------- Scrim hero ----------
   Templat asal meletakkan scrim rata 50% (.hero:before) + 10% inline, menjadikan
   video kelam merata. Diganti dengan gradien: gelap di kiri tempat tajuk dan kad
   log masuk duduk, hampir telus di kanan supaya video kekal kelihatan.          */
.hero:before { background: transparent !important; }

.sb-hero-overlay {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 14, 35, .60) 0%, rgba(10, 14, 35, .18) 14%, rgba(10, 14, 35, 0) 26%),
    linear-gradient(90deg, rgba(10, 14, 35, .82) 0%, rgba(10, 14, 35, .60) 38%, rgba(10, 14, 35, .20) 70%, rgba(10, 14, 35, .08) 100%);
}

/* Pada skrin kecil kad log masuk melebar penuh dan video di-crop dari tengah,
   jadi guna scrim sekata. */
@media (max-width: 991.98px) {
  .sb-hero-overlay {
    background:
      linear-gradient(180deg, rgba(10, 14, 35, .70) 0%, rgba(10, 14, 35, .58) 30%, rgba(10, 14, 35, .62) 100%);
  }
}