/* =========================
   HERO: background blur + gambar tajam menyatu
   ========================= */

.beranda__kotak--hero{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  min-height: 460px;
  display: flex;
  align-items: center;
  isolation: isolate;
  background: #0b1220;
}

/* layer 1: background blur */
.beranda__kotak--hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 0;
  background-image: var(--gambar-hero);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(18px);
  transform: scale(1.10);
  opacity: .55;
}

/* layer 2: overlay gradasi gelap di kiri -> transparan kanan (biar teks kebaca) */
.beranda__kotak--hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  pointer-events:none;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.64) 35%,
    rgba(185,28,28,.18) 62%,
    rgba(0,0,0,0) 100%
  );
}

/* gambar tajam (kanan) */
.beranda__media{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0;                 /* penting: biar menyatu */
}

.beranda__media img{
  width: 52%;
  height: 100%;
  object-fit: cover;          /* mockup: terlihat “penuh” */
  object-position: right center;

  /* kunci “nyatu”: sisi kiri gambar difade ke transparan */
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.25) 16%,
    rgba(0,0,0,1) 34%,
    rgba(0,0,0,1) 100%
  );
  mask-image: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.25) 16%,
    rgba(0,0,0,1) 34%,
    rgba(0,0,0,1) 100%
  );

  /* optional: sedikit glow/kontras agar wajah lebih “pop” */
  filter: saturate(1.05) contrast(1.03);
}

/* konten teks */
.beranda__konten{
  position: relative;
  z-index: 3;
  padding: 56px 46px;
  width: 56%;
  color: #fff;
}

.beranda__judul{
  margin: 0 0 12px;
  font-weight: 850;
  line-height: 1.06;
  font-size: clamp(28px, 3.8vw, 46px);
  max-width: 22ch;
  text-shadow: 0 10px 26px rgba(0,0,0,.35);
}

.beranda__deskripsi{
  margin: 0 0 22px;
  color: rgba(255,255,255,.90);
  max-width: 60ch;
  line-height: 1.6;
}

/* mobile */
@media (max-width: 992px){
  .beranda__konten{
    width: 100%;
    padding: 34px 22px;
    text-align: center;
  }

  .beranda__media{
    position: relative;
    inset: auto;
    height: 260px;
  }

  .beranda__media img{
    width: 100%;
    height: 260px;
    object-fit: cover;
    -webkit-mask-image: none;
    mask-image: none;
    filter: none;
  }

  .beranda__kotak--hero::before{
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.82) 0%,
      rgba(185,28,28,.18) 55%,
      rgba(0,0,0,0) 100%
    );
  }
}
/* =========================================================
   HERO CTA: kotak menarik (kontras tinggi)
   ========================================================= */

.beranda__aksi{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* reset gaya link biru */
.beranda__aksi a{
  text-decoration: none;
}

/* base tombol */
.beranda__aksi .tombol{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 14px;              /* kotak rounded */
  font-weight: 850;
  letter-spacing: .01em;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 14px 28px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* tombol utama: merah PMI */
.beranda__aksi .tombol--merah{
  color: #fff !important;
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  border-color: rgba(255,255,255,.12);
  box-shadow:
    0 16px 34px rgba(185,28,28,.28),
    0 14px 28px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.18);
}

/* tombol kedua: “glass” putih agar kontras di background gelap */
.beranda__aksi .tombol--lembut{
  color: #111827 !important;
  background: rgba(255,255,255,.92);
  border-color: rgba(17,24,39,.12);
  box-shadow:
    0 14px 28px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* hover/focus */
.beranda__aksi .tombol:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.beranda__aksi .tombol:focus-visible{
  outline: 3px solid rgba(255,255,255,.45);
  outline-offset: 3px;
}

/* optional: icon kecil otomatis di tombol utama (kalau mau terlihat lebih “action”) */
.beranda__aksi .tombol--merah::after{
  content: "→";
  margin-left: 10px;
  font-weight: 900;
  opacity: .95;
}

/* kecilkan di mobile agar rapi */
@media (max-width: 480px){
  .beranda__aksi .tombol{
    padding: 11px 14px;
    border-radius: 12px;
  }
}