/* public_html/assets/css/header-landing.css */
/* Khusus header landing: full width + gradasi putih->merah + logo PMI + dropdown */

/* =========================
   WRAPPER HEADER
   ========================= */
.lp-header{
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  border-bottom: 1px solid rgba(220, 38, 38, .18);
}

/* background gradasi full width */
.lp-header__bg{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ffffff 0%, #ffe4e6 45%, #ef4444 120%);
  pointer-events: none;
}

/* pastikan isi berada di atas background */
.lp-header .lp-container{
  position: relative;
}

/* =========================
   IMPORTANT: HEADER ISI FULL WIDTH
   - override lp-container landing.css yang biasanya max-width + center
   ========================= */
.lp-header .lp-container{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
}

@media (min-width: 1200px){
  .lp-header .lp-container{
    padding-left: 34px !important;
    padding-right: 34px !important;
  }
}
@media (min-width: 1600px){
  .lp-header .lp-container{
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

/* baris header */
.lp-header__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 76px;
  width: 100%;
  box-sizing: border-box;  /* Penjelasan: Memastikan padding tidak menambah lebar total */
}

/* =========================
   BRAND (LOGO + TEKS)
   ========================= */
.lp-brand{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
}

.lp-brand__mark{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(220, 38, 38, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(17, 24, 39, .06);
}

.lp-brand__logo{
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}

.lp-brand__text b{
  display: block;
  line-height: 1.1;
  font-weight: 800;
  color: #111827;
}
.lp-brand__text small{
  display: block;
  opacity: .85;
  color: #111827;
}

/* =========================
   NAV DESKTOP
   ========================= */
.lp-nav{
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 auto;          /* Penjelasan: Jangan paksa ambil semua ruang */
  margin: 0 auto;          /* Penjelasan: Tetap di tengah secara otomatis */
}

.lp-nav__link{
  color: #111827;
  text-decoration: none;
  font-weight: 650;
  padding: 10px 10px;
  border-radius: 12px;
  transition: background .15s ease, opacity .15s ease;
}

.lp-nav__link:hover{
  background: rgba(255,255,255,.55);
}

/* =========================
   DROPDOWN Y-HUB (DESKTOP)
   ========================= */
.lp-drop{
  position: relative;
  display: inline-block;
}

.lp-drop__btn{
  cursor: pointer;
  background: transparent;
  border: 0;
}

.lp-drop__caret{
  margin-left: 4px;
  opacity: .7;
}

.lp-drop__menu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 240px;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, .10);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(17, 24, 39, .12);
  padding: 8px;
  display: none;
}

.lp-drop__item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #111827;
  font-weight: 650;
  transition: background .15s ease;
}

.lp-drop__item:hover{
  background: rgba(239,68,68,.08);
}

.lp-drop__item.is-locked{
  opacity: .75;
}

.lp-drop__sep{
  height: 1px;
  background: rgba(17,24,39,.08);
  margin: 8px 6px;
}

/* ketika dropdown dibuka (JS toggle .is-open pada .lp-drop) */
.lp-drop.is-open .lp-drop__menu{
  display: block;
}

/* =========================
   ACTION BUTTONS (KANAN)
   ========================= */
.lp-actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;          /* Tetap tidak boleh mengecil */
  justify-content: flex-end;
  min-width: fit-content;  /* Penjelasan: Paksa lebar mengikuti isi tombol */
}

.lp-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(17, 24, 39, .12);
  text-decoration: none;
  font-weight: 750;
  color: #111827;
  background: rgba(255, 255, 255, .65);
  transition: filter .15s ease, background .15s ease;
}

.lp-btn--ghost:hover{
  background: rgba(255, 255, 255, .85);
}

.lp-btn--primary{
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.lp-btn--primary:hover{
  filter: brightness(.96);
}

/* =========================
   BURGER (MOBILE)
   ========================= */
.lp-burger{
  width: 44px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(17, 24, 39, .12);
  background: rgba(255, 255, 255, .65);
  display: none; /* tampil di mobile */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 12px;
}

.lp-burger span{
  display: block;
  height: 2px;
  width: 100%;
  background: #111827;
  border-radius: 2px;
}

/* =========================
   MOBILE PANEL
   ========================= */
.lp-mobile{
  border-top: 1px solid rgba(17, 24, 39, .10);
  background: rgba(255, 255, 255, .92);
  display: none;
}

.lp-mobile__inner{
  padding: 14px 0;
}

.lp-mobile__link{
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: #111827;
  font-weight: 650;
}

.lp-mobile__sep{
  height: 1px;
  background: rgba(17, 24, 39, .10);
  margin: 10px 0;
}

.lp-mobile__title{
  font-weight: 850;
  margin-bottom: 6px;
  color: #111827;
}

/* jika mobile dibuka (JS toggle .is-open pada .lp-mobile) */
.lp-mobile.is-open{
  display: block;
}

/* =========================
   RESPONSIVE: desktop -> mobile
   ========================= */
@media (max-width: 920px){
  .lp-nav{
    display: none;
  }
  .lp-burger{
    display: inline-flex;
  }

  /* brand text boleh dipendekkan biar muat */
  .lp-brand__text small{
    display: none;
  }
}

/* =========================
   OPTIONAL: jika ada shadow halus
   ========================= */
.lp-header{
  box-shadow: 0 10px 30px rgba(17, 24, 39, .06);
}