/* =========================================================
   siteHeader.css — FINAL (FLEX, NO BEUNDAK)
   Untuk siteHeader.js (logo + teks 2 baris + menu)
   Struktur: menu kiri | teks (flex) | logo kanan
   ========================================================= */

.siteHeader{
  position: sticky;
  top: 0;
  /*z-index: 60;*/
  position: relative;
  z-index: 9999;
  backdrop-filter: blur(10px);
  background: radial-gradient(900px 600px at 85% 0%, rgba(41, 134, 75, 0.1), transparent 55%);
  border-bottom: 1px solid var(--border);
}

/* supaya anchor #pivot/#about tidak ketutup header sticky */
html{ scroll-padding-top: 92px; }

/* =========================
   Container (FLEX)
   ========================= */
.siteHeaderInner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 12px;

  display: flex;
  align-items: center;      /* ✅ kunci: semua sejajar satu garis */
  justify-content:space-between;
  gap:12px;
  direction: ltr;           /* ✅ layout LTR biar menu benar-benar kiri */
  min-height: 92px;         /* stabilkan tinggi header */
}

/* =========================
   MENU (kiri)
   ========================= */
.shRight{
  order: 1;
  display: flex;
  align-items: center;
  gap: 10px;

  direction: rtl;           /* teks Arab di tombol tetap RTL */
}

/* menu pills */
.shMenu{
  border: 1px solid var(--border);
  border-radius: 999px;

  font-size: 18px;
  color: var(--muted);
  background: var(--chipbg);
  text-decoration: none;
  user-select: none;
  white-space: nowrap;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;           /* ✅ stabilkan baseline */
  padding: 10px 14px;
}

.shMenu:hover{
  border-color: rgba(37,99,235,.25);
  color: var(--text);
}

.shMenuPrimary{
  border-color: rgba(22,163,74,.28);
  background: rgba(22,163,74,.10);
  color: #166534;
  font-weight: 900;
}

.shMenu:focus-visible{
  outline: 2px solid rgba(37,99,235,.35);
  outline-offset: 2px;
}

/* =========================
   TEKS (tengah, mengisi ruang)
   ========================= */
.shCenter{
  order: 2;
  flex: 1;                  /* ✅ isi ruang tengah */
  min-width: 0;

  direction: rtl;
  text-align: right;

  display: flex;
  flex-direction: column;
  justify-content: center;  /* ✅ center vertikal */
  align-items: flex-start;    /* ✅ nempel ke kanan (dekat logo) */
}

.shTitle{
  font-weight: 900;
  font-size: 22px;
  color: var(--text);
  letter-spacing: .2px;
  line-height: 1.15;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shSubtitle{
  margin-top: 2px;
  font-size: 18px;
  color: var(--muted);
  line-height: 1.15;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================
   LOGO (kanan)
   ========================= */
.shLeft{
  order: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}

.shLogo{
  width: 70px;
  height: 70px;
  display: block;
  object-fit: contain;

  filter: drop-shadow(0 1px 0 rgba(255,255,255,.65));
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 860px){
  html{ scroll-padding-top: 110px; }

  .siteHeaderInner{
    min-height: auto;
    padding: 10px 12px;

    flex-wrap: wrap;
    align-items: center;
  }

  /* logo tetap kanan atas */
  .shLeft{
    order: 2;
  }

  /* teks turun baris kedua full */
  .shCenter{
    order: 3;
    flex-basis: 100%;
    align-items: flex-end;
  }

  /* menu tetap kiri */
  .shRight{
    order: 1;
    flex-wrap: wrap;
    gap: 8px;
  }

  .shLogo{
    width: 44px;
    height: 44px;
  }

  .shTitle{ font-size: 18px; }
  .shSubtitle{ font-size: 14px; }
}

@media (max-width: 520px){
  .shMenu{
    padding: 7px 10px;
    font-size: 13px;
  }
}

/* === AUTH HEADER EXT (dropdown + status) === */

/* === AUTH HEADER EXT — alignment polish === */

.shRightWrap{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.shStatus{
  font-size: 11px;
  opacity: 0.75;
  line-height: 1;
  white-space: nowrap;
}


.shAccount{
  position: relative;
  display: inline-block;
}

.shAccountBtn{
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.shDropdown{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  min-width: 210px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  padding: 6px;
  display: none;
  z-index: 9999;
  max-width: min(420px, calc(100vw - 24px));
}

.shDropdown.dd-left  { left: 0; right: auto; }
.shDropdown.dd-right { right: 0; left: auto; }

.shAccount.open .shDropdown{
  display: block;
}

.shDropdownItem{
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

.shDropdownItem:hover{
  background: rgba(0,0,0,.06);
}

/* ===================================================
   Workspace Variant — Minimal Header
   Aktif jika <body class="page-workspace">
   =================================================== */

/* hilangkan margin global header di workspace */
body.page-workspace .siteHeader {
  margin-top: 0;
  margin-bottom: 0;
}

/* reset: MATIKAN order warisan header besar */
body.page-workspace .shLeft,
body.page-workspace .shRight {
  order: unset !important;
}

/* container: kiri = status, kanan = menu */
body.page-workspace .siteHeaderInner {
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* tinggi minimal & padding tipis */
  min-height: 40px;
  padding: 0 12px;

  /* penting: layout tetap LTR agar space-between natural */
  direction: ltr;
}

/* kiri: status mentok kiri (minus padding) */
body.page-workspace .shLeft{
  direction: ltr;                 /* email enak dibaca */
  text-align: left;
  margin-left: -12px;
  padding-left: 12px;
  white-space: nowrap;
}

/* status inline (email lebih enak LTR) */
body.page-workspace .shStatusInline {
  font-size: 14px;
  line-height: 1.2;
  opacity: 0.85;
  direction: ltr;
  text-align: left;
  white-space: nowrap;
}

/* kanan: menu benar-benar mentok kanan */
body.page-workspace .shRight{
  direction: rtl;                 /* INI yang ngembaliin urutan & teks Arab */
  unicode-bidi: plaintext;        /* bantu agar campuran Arab/Latin aman */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: -12px;
  padding-right: 12px;
  gap: 6px;
}


/* tombol menu lebih ramping */
body.page-workspace .shMenu{
  padding: 4px 8px;
  font-size: 13px;
  line-height: 1.2;
  border-radius: 999px;
}

/* primary button sedikit lebih tegas */
body.page-workspace .shMenuPrimary {
  padding: 4px 10px;
  font-weight: 600;
}

/* dropdown button (account) */
body.page-workspace .shAccount{
  position: relative;
}


/* dropdown panel: selalu nempel kanan tombol */
body.page-workspace .shDropdown{
  right: 0;
  left: auto;
  direction: rtl;                 /* isi dropdown RTL */
}