/* ============================================================
   Greeny's — header seragam ala landing (pages/home.html)
   Dimuat SETELAH greeny.css di semua halaman. Hanya menyentuh
   elemen di dalam <header>, tidak mengubah fungsi/JS apa pun.
   ============================================================ */

/* logo: badge daun + teks lebih tegas */
header .hleaf {
  width: 38px; height: 38px; border-radius: 50%;
  background: #4F6B54; color: #fff;
  display: inline-grid; place-items: center;
  font-size: 1.05rem; line-height: 1;
  box-shadow: 0 4px 18px rgba(79, 107, 84, .35);
  flex: none;
}
html.dark header .hleaf { background: #5C7460; box-shadow: 0 4px 18px rgba(0, 0, 0, .4); }
header a.font-headline-md,
header a[href="home"].font-bold,
header a[href="login"].font-bold {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800 !important; letter-spacing: -.01em;
}

/* link nav: underline tumbuh dari kiri, ala landing (ukuran teks disamakan) */
header nav a {
  position: relative; font-weight: 600; padding-bottom: 4px;
  font-size: .93rem;
}

/* ikon toggle tema: SVG bulan/matahari ala landing */
header #theme-toggle { color: #4F6B54; }
html.dark header #theme-toggle { color: #8EA58C; }
header #theme-toggle .ico-moon,
header #theme-toggle .ico-sun { width: 19px; height: 19px; display: block; }
header #theme-toggle .ico-sun { display: none; }
html.dark header #theme-toggle .ico-sun { display: block; }
html.dark header #theme-toggle .ico-moon { display: none; }
header nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: #4F6B54;
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s cubic-bezier(.22, .8, .26, .99);
}
header nav a:hover::after { transform: scaleX(1); transform-origin: left; }
html.dark header nav a::after { background: #8EA58C; }
/* link aktif versi lama pakai border-b — matikan supaya tak dobel garis */
header nav a.border-b-2 { border-bottom-width: 0 !important; }
header nav a.border-b-2::after { transform: scaleX(1); }
/* :not(.font-headline-md) -> jangan garisbawahi LOGO (logo juga punya .font-bold) */
header nav a.font-bold:not(.font-headline-md)::after { transform: scaleX(1); }
/* Underline hover HANYA utk link nav teks. Matikan total di LOGO + tombol ikon (<a> chat/cart/
   dll di grup .gap-base) — garis bawah di logo/ikon jelek. content:none = pseudo tak dibuat. */
header nav a.font-headline-md::after,
header nav a[href="home"]::after,
header nav a[href="login"]::after,
header nav .flex.items-center:is(.gap-base,.gap-2) a::after { content: none; }

/* tombol ikon (tema/chat/cart/notif/akun): bulat berbingkai halus */
header .flex.items-center:is(.gap-base,.gap-2) > button,
header .flex.items-center:is(.gap-base,.gap-2) > a,
header .flex.items-center:is(.gap-base,.gap-2) > .relative > button {
  border: 1.5px solid rgba(191, 207, 187, .55);
  border-radius: 999px;
  transition: border-color .3s, transform .3s cubic-bezier(.22, .8, .26, .99);
}
header .flex.items-center:is(.gap-base,.gap-2) > button:hover,
header .flex.items-center:is(.gap-base,.gap-2) > a:hover,
header .flex.items-center:is(.gap-base,.gap-2) > .relative > button:hover {
  border-color: #4F6B54; transform: translateY(-2px) scale(1.08);
}
/* toggle tema: motion putar ala home */
header #theme-toggle:hover { transform: rotate(15deg) scale(1.06) !important; }
/* soft-press ikon & tombol header */
header .flex.items-center:is(.gap-base,.gap-2) > button:active,
header .flex.items-center:is(.gap-base,.gap-2) > a:active,
header .flex.items-center:is(.gap-base,.gap-2) > .relative > button:active { transform: scale(.9) !important; }
header .hbtn:active {
  transform: translateY(1px) scale(.97) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .18) !important;
}
html.dark header .flex.items-center:is(.gap-base,.gap-2) > button,
html.dark header .flex.items-center:is(.gap-base,.gap-2) > a,
html.dark header .flex.items-center:is(.gap-base,.gap-2) > .relative > button {
  border-color: rgba(58, 74, 60, .8);
}
html.dark header .flex.items-center:is(.gap-base,.gap-2) > button:hover,
html.dark header .flex.items-center:is(.gap-base,.gap-2) > a:hover,
html.dark header .flex.items-center:is(.gap-base,.gap-2) > .relative > button:hover {
  border-color: #8EA58C;
}
/* tombol Masuk/Daftar untuk tamu (disuntik api.js) — ala landing */
header .hauth { display: inline-flex; align-items: center; gap: 10px; margin-left: 6px; }
header .hbtn {
  display: inline-flex; align-items: center;
  padding: 11px 26px; border-radius: 999px;
  font-weight: 700; font-size: .92rem; line-height: 1;
  transition: transform .3s cubic-bezier(.22, .8, .26, .99), background .3s, border-color .3s, color .3s, box-shadow .3s;
}
header .hbtn--ghost { border: 1.5px solid rgba(191, 207, 187, .8); color: #4F6B54; }
header .hbtn--ghost:hover { border-color: #4F6B54; transform: translateY(-2px); }
header .hbtn--solid { background: #4F6B54; color: #fff !important; box-shadow: 0 8px 20px rgba(79, 107, 84, .3); }
header .hbtn--solid:hover { background: #344C3D; transform: translateY(-2px); }
html.dark header .hbtn--ghost { border-color: rgba(58, 74, 60, .9); color: #AEC0A9; }
html.dark header .hbtn--ghost:hover { border-color: #8EA58C; color: #8EA58C; }
html.dark header .hbtn--solid { background: #5C7460; }
html.dark header .hbtn--solid:hover { background: #6b8570; }

/* jangan beri bingkai ke elemen tersembunyi & popup notif */
header .flex.items-center:is(.gap-base,.gap-2) > .hidden { border: 0; }
header #notif-pop, header #notif-pop * { border-radius: 0; }
header #notif-pop { border-radius: 16px !important; border: 1px solid rgba(191, 207, 187, .4) !important; }

/* ---------- mobile kompak: cegah header meluber ---------- */
@media (max-width: 640px) {
  header .flex.items-center:is(.gap-base,.gap-2) { gap: 6px; }
  header .hbtn { padding: 8px 14px; font-size: .8rem; }
  header .hauth { margin-left: 2px; }
  header a.font-headline-md { font-size: 1.05rem !important; gap: 7px; }
  header .hleaf { width: 30px; height: 30px; font-size: .85rem; }
  header .flex.items-center:is(.gap-base,.gap-2) > button,
  header .flex.items-center:is(.gap-base,.gap-2) > a,
  header .flex.items-center:is(.gap-base,.gap-2) > .relative > button { padding: 6px !important; }
}

/* ikon header (cart/chat/notif/akun) disamakan ukurannya dengan toggle tema (19px) */
header .flex.items-center:is(.gap-base,.gap-2) > a > .material-symbols-outlined,
header .flex.items-center:is(.gap-base,.gap-2) > button > .material-symbols-outlined,
header .flex.items-center:is(.gap-base,.gap-2) > .relative > button > .material-symbols-outlined {
  font-size: 19px;
  line-height: 1;
  display: block;
}

/* Sembunyikan toggle tema hanya kalau ada hamburger yg sudah memuat toggle.
   has-mm (admin, burger <768): hide di mobile saja. has-mm-lg (nav landing + seller,
   burger sampai <1024): hide s/d tablet 1023. Page tanpa hamburger (comments/detail): tetap tampil. */
@media (max-width: 767px) {
  header.has-mm #theme-toggle { display: none !important; }
}
@media (max-width: 1023px) {
  header.has-mm-lg #theme-toggle { display: none !important; }
}

/* burger sama persis .nav__burger landing (tombol injeksi #mobile-menu-btn) */
#mobile-menu-btn {
  width: 42px; height: 42px;
  background: none; border: 0 !important;
  position: relative; z-index: 140;
}
#mobile-menu-btn span {
  display: block; width: 24px; height: 2px; margin: 5px auto;
  background: #2A352A; transition: .35s cubic-bezier(.22, .8, .26, .99);
}
html.dark #mobile-menu-btn span { background: #DCE6D7; }
#mobile-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#mobile-menu-btn.open span:nth-child(2) { opacity: 0; }
#mobile-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile: SEMUA ikon header (chat/keranjang/notif/profil/Masuk) pindah ke panel
   hamburger — header cukup logo + burger, ala homepage */
@media (max-width: 1023px) {
  header.has-mm .flex.items-center:is(.gap-base,.gap-2) > *:not(#mobile-menu-btn) { display: none !important; }
}

/* panel hamburger — meniru .nav__links homepage (landing.css) */
#mobile-menu {
  position: fixed; inset: 0; z-index: 130;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
  font-family: "Manrope", sans-serif; /* font body homepage (landing.css) */
  gap: 28px; padding: 24px;
  background: rgba(241, 244, 237, .97);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s, visibility .4s;
}
html.dark #mobile-menu { background: rgba(16, 23, 18, .97); }
#mobile-menu.open { opacity: 1; visibility: visible; pointer-events: auto; }
@media (min-width: 768px) { #mobile-menu:not(.mm-lg) { display: none !important; } }
@media (min-width: 1024px) { #mobile-menu { display: none !important; } } /* .mm-lg (seller, sidebar lg) mati di 1024 */
#mobile-menu a { text-decoration: none; }
#mobile-menu .mm-link { font-size: .93rem; font-weight: 600; color: #54624F; transition: color .3s; }
#mobile-menu .mm-link.active, #mobile-menu .mm-link:hover { color: #4F6B54; }
html.dark #mobile-menu .mm-link { color: #AEC0A9; }
html.dark #mobile-menu .mm-link.active, html.dark #mobile-menu .mm-link:hover { color: #8EA58C; }
#mobile-menu .mm-icons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 300px; }
#mobile-menu .mm-iconbtn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(234, 242, 230, .35);
  background: transparent; color: #CDE3C6;
  display: grid; place-items: center;
}
#mobile-menu .mm-cta {
  margin-top: 10px; padding: 16px 48px; border-radius: 999px;
  background: #4F6B54; color: #fff; font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 10px 26px rgba(79, 107, 84, .3);
}
html.dark #mobile-menu .mm-cta { background: #5C7460; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
/* X penutup = burger morph landing (burger asli tertimbun panel: stacking context header) */
#mobile-menu .mm-close {
  position: absolute; top: 11px; right: 16px;
  width: 42px; height: 42px; background: none; border: 0;
}
#mobile-menu .mm-close span {
  display: block; width: 24px; height: 2px; margin: 5px auto;
  background: #2A352A; transition: .35s cubic-bezier(.22, .8, .26, .99);
}
html.dark #mobile-menu .mm-close span { background: #DCE6D7; }
#mobile-menu .mm-close span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#mobile-menu .mm-close span:nth-child(2) { opacity: 0; }
#mobile-menu .mm-close span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }