/* =========================================================
   PMB (AAK Poster Banner)
   - Full width section (edge-to-edge)
   - Background luar putih
   - Background poster hanya di card (.pmb-banner)
   - Gambar kiri: 1 image full (tanpa background CSS)
   - Badge: kuning jajaran genjang
   - Footer links: rapat di kotak kanan
   - Tambah tombol: Daftar Sekarang & Info Lebih Lanjut
   ========================================================= */

.pmb{
  --pmb-gutter: var(--page-gutter, clamp(14px, 2.2vw, 32px));

  --blue-900:#071a3a;
  --blue-800:#0b2a63;
  --blue-700:#0b4aa2;
  --yellow:#ffd34a;
  --yellow-2:#ffbf2f;
  --white:#ffffff;
  --muted: rgba(255,255,255,.86);
  --stroke: rgba(255,255,255,.18);

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background: #fff;

  padding: clamp(18px, 3vw, 34px) 0 22px;
  position: relative;
  z-index: 1;
}

.pmb__container{
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: var(--pmb-gutter);
  padding-right: var(--pmb-gutter);
}

.pmb-wrap{
  width: 100%;
  max-width: none;
  margin: 0;
}

/* banner card */
.pmb-banner{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;

  border-radius: 22px;
  overflow: hidden;

  border: 1px solid var(--stroke);
  box-shadow:
    0 26px 70px rgba(0,0,0,.35),
    0 10px 24px rgba(0,0,0,.18);

  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    linear-gradient(135deg, #0b2a63 0%, #0b4aa2 55%, #0d5bd0 100%);
}

/* pattern */
.pmb-banner::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(circle at 75% 40%, rgba(255,211,74,.18), transparent 60%),
    radial-gradient(circle at 65% 85%, rgba(255,122,24,.14), transparent 55%);
  pointer-events:none;
}

/* =========================
   LEFT: GAMBAR 1 KOTAK FULL
   ========================= */
.pmb-right{
  display: flex;
  flex-direction: column;
}

.pmb-photo{
  width: 100%;
  height: auto;           /* kalau pakai people.png, lebih aman auto */
  display: block;
}

/* Call center di bawah gambar */
.pmb-call--below{
  padding: 10px 14px;
  text-align: center;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .02em;

  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.18);
  border-top: 1px solid rgba(255,255,255,.14);
}


/* =========================
   RIGHT: KONTEN
   ========================= */
.pmb-left{
  position: relative;
  z-index:1;

  padding: clamp(20px, 2.2vw, 28px) clamp(16px, 2.2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* HEAD */
.pmb-head{
  display:flex;
  align-items:flex-start;
  gap: 14px;
}

.pmb-mega{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.mega-svg{
  width: 34px;
  height: 34px;
  fill: var(--yellow);
  opacity: .95;
}
.mega-svg path:nth-child(4){
  stroke: var(--yellow);
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
}

/* Title */
.pmb-title{
  margin: 0;
  font-family: "Montserrat", "Poppins", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: .95;
  font-size: clamp(42px, 5.2vw, 72px);
  text-transform: uppercase;
  text-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.t-white{ color: #fff; display:block; }
.t-yellow{ color: var(--yellow); display:block; }

/* subtitle */
.pmb-sub{
  margin-top: 12px;
  display:grid;
  gap: 2px;
  max-width: 56ch;
  margin-bottom: 12px;
}
.sub-1{
  font-size: 20px;
  color: var(--muted);
}
.sub-2{
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
}

/* =========================
   BADGES: kuning jajaran genjang
   ========================= */
.pmb-badges{
  margin-top: 10px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.pmb-badge-call{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

.badge{
  min-width: 170px;
  padding: 12px 18px;

  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);

  background: linear-gradient(135deg, var(--yellow) 0%, var(--yellow-2) 100%);
  border: 1px solid rgba(0,0,0,.10);

  box-shadow:
    0 10px 22px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.35);

  color: #071a3a;
}

.b-top{
  font-size: 12px;
  font-weight: 900;
  opacity: .92;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(7,26,58,.90);
}

.b-main{
  margin-top: 4px;
  font-family: "Montserrat", "Poppins", sans-serif;
  font-weight: 950;
  font-size: 16px;
  letter-spacing: .02em;
  color: #071a3a;
}

.pmb-call{
  display:flex;
  align-items:center;
    padding : 10px;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: .02em;

  color: yellow;
  text-shadow: 0 10px 20px rgba(0,0,0,.22);

  white-space: nowrap;
}

/* =========================
   BUTTONS (CTA)
   ========================= */
.pmb-actions{
  margin-top: clamp(18px, 2.2vw, 28px);
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.pmb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: 44px;
  padding: 0 16px;
  border-radius: 14px;

  font-weight: 900;
  font-size: 14px;
  text-decoration:none;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 26px rgba(0,0,0,.22);

  transition: transform .15s ease, background .15s ease;
}
.pmb-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); }
.pmb-btn:active{ transform: translateY(0); }

.pmb-btn--primary{
  background: linear-gradient(180deg, rgba(255, 211, 74, .98), rgba(255, 191, 47, .88));
  border-color: rgba(255, 211, 74, .55);
  color: #071a3a;
}
.pmb-btn--primary:hover{
  background: linear-gradient(180deg, rgba(255, 211, 74, 1), rgba(255, 191, 47, .92));
}

.pmb-btn--ghost{
  background: rgba(3,12,30,.22);
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.92);
}

/* =========================
   FOOTER LINKS (DI KOTAK KANAN)
   rapat & rapi
   ========================= */
.pmb-footer{
  margin-top: auto; /* dorong ke bawah kotak kanan */
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.foot-link{
  display:inline-flex;
  align-items:center;
  gap: 10px;

  padding: 9px 12px;
  border-radius: 999px;

  text-decoration:none;
  color: #fff;

  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px);

  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;

  max-width: 100%;
}

.foot-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}

.foot-ico{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.16);
}

.ico-svg{
  width: 18px;
  height: 18px;
  fill: #fff;
  opacity: .95;
}

.foot-text-one{
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(320px, 46vw);
}

/* accents */
.foot-link.tel{ border-color: rgba(255, 211, 74, .38); }
.foot-link.ig{ border-color: rgba(225, 48, 108, .34); }
.foot-link.tt{ border-color: rgba(0, 242, 234, .26); }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1024px){
  .pmb-banner{ grid-template-columns: 1fr; }

  .pmb-right{
    min-height: clamp(220px, 44vw, 360px);
  }

  .pmb-left{
    padding: 18px 16px 16px;
  }

  .pmb-footer{
    margin-top: 14px;
  }

  .foot-text-one{
    max-width: 70vw;
  }
}

@media (max-width: 520px){
  .pmb-title{ font-size: clamp(34px, 10vw, 46px); }

  .badge{ min-width: 150px; padding: 11px 16px; }

  .pmb-call{
    width: 100%;
    white-space: normal;
  }

  .pmb-btn{
    width: 100%;
  }

  .foot-link{
    width: 100%;
    justify-content: flex-start;
  }

  .foot-text-one{
    max-width: 75vw;
  }
}