/* HazdoBuilder - header situs. Tampilan HP memakai container query (nama: hzh) supaya pratinjau editor sama dengan halaman depan. */
.hzh{--hzh-acc:var(--hn-accent,#d9262b);--hzh-d-bg:var(--hn-bg,#fff);--hzh-d-text:var(--hn-text,#1a1a1a);--hzh-d-line:var(--hn-line,#e5e7eb);--hzh-d-mute:var(--hn-mute,#6b7280);position:relative;z-index:60;background:var(--hzh-bg,var(--hzh-d-bg));color:var(--hzh-d-text);font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
html[data-theme=dark] .hzh{--hzh-d-bg:#121214;--hzh-d-text:#ececee;--hzh-d-line:#2c2c32;--hzh-d-mute:#9ca3af}
.hzh *,.hzh *::before,.hzh *::after{box-sizing:border-box}
.hzh a{color:inherit;text-decoration:none}
.hzh a:hover{color:var(--hzh-acc)}
.hzh .hzh-i{flex:none;vertical-align:-.15em}
.hzh-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hzh-wrap{container:hzh/inline-size;max-width:var(--hzh-max,1180px);margin:0 auto;padding:0 20px}

/* Menempel: hanya menu (header dibuat "display:contents" agar <nav> menempel terhadap halaman) atau seluruh header */
.hzh--sticky-nav:not(.hzh--preview){display:contents}
.hzh--sticky-nav:not(.hzh--preview) .hzh-nav{position:sticky;top:0;z-index:60}
.hzh--sticky-all:not(.hzh--preview){position:sticky;top:0}
.admin-bar .hzh--sticky-nav:not(.hzh--preview) .hzh-nav,.admin-bar .hzh--sticky-all:not(.hzh--preview){top:32px}
.hzh--shadow .hzh-nav{box-shadow:0 3px 14px rgba(0,0,0,.09)}

/* Bilah atas */
.hzh-topbar{background:var(--hzh-tb-bg,#1c1c1c);color:var(--hzh-tb-c,#d4d4d8);font-size:12px}
.hzh-topbar a{color:inherit}
.hzh-topbar-in{display:flex;align-items:center;justify-content:space-between;min-height:var(--hzh-tb-h,34px)}
.hzh-topr{display:flex;align-items:center;gap:14px}
.hzh-sep{opacity:.5;margin:0 6px}
.hzh-social{display:flex;gap:12px}
.hzh-social a{display:flex}
.hzh-mode{position:relative;width:38px;height:20px;padding:0;border:0;border-radius:99px;background:#3f3f46;cursor:pointer}
.hzh-mode-knob{position:absolute;top:2px;left:2px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#fff;color:#18181b;transition:transform .2s}
html[data-theme=dark] .hzh-mode{background:var(--hzh-acc)}
html[data-theme=dark] .hzh-mode-knob{transform:translateX(18px)}

/* Logo, pencarian, akun */
.hzh-brandrow{background:var(--hzh-bg,var(--hzh-d-bg))}
.hzh-brand-in{display:flex;align-items:center;gap:28px;padding-top:var(--hzh-pt,22px);padding-bottom:var(--hzh-pb,22px)}
.hzh-burger{display:none;padding:6px;border:0;background:none;color:var(--hzh-d-text);cursor:pointer}
.hzh-logo{display:flex;flex-direction:column;flex:none}
.hzh-logo .custom-logo-link{display:block}
.hzh-logo .custom-logo,.hzh-logo-img{display:block;width:auto;max-width:100%;height:var(--hzh-logo-h,56px)}
.hzh .hzh-logo-text{font-size:var(--hzh-logo-fs,32px);font-weight:var(--hzh-logo-fw,800);line-height:1;letter-spacing:-.03em;color:var(--hzh-logo-c,var(--hzh-d-text))}
.hzh .hzh-logo-text:hover{color:var(--hzh-acc)}
.hzh-tagline{margin-top:4px;font-size:11px;color:var(--hzh-tag-c,var(--hzh-d-mute))}

.hzh-search{position:relative;display:flex;align-items:center;flex:1;min-width:0;max-width:var(--hzh-s-w,440px);margin:0 auto;border:var(--hzh-s-bw,1.5px) solid var(--hzh-s-bc,var(--hzh-acc));border-radius:99px;background:var(--hzh-s-bg,var(--hzh-d-bg))}
.hzh-s--box .hzh-search{border-radius:4px}
.hzh-s--underline .hzh-search{border-width:0 0 var(--hzh-s-bw,1.5px);border-radius:0;background:transparent}
.hzh-search input{flex:1;min-width:0;padding:10px 18px;border:0;border-radius:inherit;background:transparent;color:var(--hzh-s-c,var(--hzh-d-text));font:inherit;font-size:14px;box-shadow:none}
.hzh-search input:focus{outline:none}
.hzh-s--underline .hzh-search input{padding-left:4px}
.hzh-search:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--hzh-s-bc,var(--hzh-acc)) 22%,transparent)}
.hzh-s--underline .hzh-search:focus-within{box-shadow:none}
.hzh-search-btn{display:grid;place-items:center;align-self:stretch;width:44px;padding:0;border:0;background:none;color:var(--hzh-s-btn,var(--hzh-d-text));cursor:pointer}
.hzh-search.hzh-sb--filled .hzh-search-btn{background:var(--hzh-s-btn,var(--hzh-acc));color:#fff;border-radius:0 99px 99px 0}
.hzh-s--box .hzh-search.hzh-sb--filled .hzh-search-btn{border-radius:0 3px 3px 0}
.hzh-s--underline .hzh-search.hzh-sb--filled .hzh-search-btn{border-radius:0}
.hzh-search.hzh-s--iconleft{flex-direction:row-reverse}
.hzh-search.hzh-sb--filled.hzh-s--iconleft .hzh-search-btn{border-radius:99px 0 0 99px}
.hzh-s--box .hzh-search.hzh-sb--filled.hzh-s--iconleft .hzh-search-btn{border-radius:3px 0 0 3px}
.hzh-search-toggle{display:none}
.hzh-s--icon .hzh-search{flex:0 0 auto;margin:0 0 0 auto;border-color:transparent;background:transparent;max-width:none}
.hzh-s--icon .hzh-search-toggle{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;background:none;color:var(--hzh-s-btn,var(--hzh-d-text));cursor:pointer}
.hzh-s--icon .hzh-search input,.hzh-s--icon .hzh-search-btn{display:none}
.hzh-s--icon .hzh-search.is-open{border-color:var(--hzh-s-bc,var(--hzh-acc));background:var(--hzh-s-bg,var(--hzh-d-bg))}
.hzh-s--icon .hzh-search.is-open input{display:block;width:240px}
.hzh-s--icon .hzh-search.is-open .hzh-search-btn{display:grid}
.hzh-s--icon .hzh-search.is-open .hzh-search-toggle{display:none}

.hzh .hzh-account{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:12px;font-weight:700;color:var(--hzh-a-c,var(--hzh-d-mute))}
.hzh.hzh-a--button .hzh-account{padding:8px 16px;border-radius:var(--hzh-a-r,6px);background:var(--hzh-a-bg,var(--hzh-acc));color:var(--hzh-a-c,#fff)}
.hzh.hzh-a--button .hzh-account:hover{color:var(--hzh-a-c,#fff);filter:brightness(.92)}
.hzh.hzh-a--icon .hzh-account span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Posisi logo di tengah */
.hzh--logocenter .hzh-brand-in{display:grid;grid-template-columns:1fr auto 1fr}
.hzh--logocenter .hzh-logo{order:2;align-items:center}
.hzh--logocenter .hzh-search{order:1;margin:0;justify-self:start;width:min(var(--hzh-s-w,440px),100%)}
.hzh--logocenter .hzh-account{order:3;margin:0;justify-self:end}
.hzh--logocenter .hzh-burger{display:none}

/* Menu */
.hzh-nav{background:var(--hzh-m-bg,var(--hzh-bg,var(--hzh-d-bg)))}
.hzh-m--lines .hzh-nav{border-top:1px solid var(--hzh-line,var(--hzh-d-line));border-bottom:1px solid var(--hzh-line,var(--hzh-d-line))}
.hzh-menu,.hzh-menu ul{margin:0;padding:0;list-style:none}
.hzh-menu{display:flex;flex-wrap:wrap}
.hzh-m--center .hzh-menu{justify-content:center}
.hzh-m--right .hzh-menu{justify-content:flex-end}
.hzh-menu li{position:relative}
.hzh-menu>li>a{display:flex;align-items:center;gap:7px;padding:var(--hzh-m-py,14px) var(--hzh-m-px,12px);font-size:var(--hzh-m-fs,12px);font-weight:var(--hzh-m-fw,800);letter-spacing:var(--hzh-m-ls,.05em);color:var(--hzh-m-c,var(--hzh-d-text))}
.hzh-m--upper .hzh-menu>li>a{text-transform:uppercase}
.hzh .hzh-menu>li:hover>a,.hzh .hzh-menu>li>a:focus-visible{color:var(--hzh-m-hc,var(--hzh-acc))}
.hzh .hzh-menu>li.current-menu-item>a,.hzh .hzh-menu>li.current-cat>a,.hzh .hzh-menu>li.current-menu-ancestor>a,.hzh .hzh-menu>li.current-menu-parent>a{color:var(--hzh-m-ac,var(--hzh-acc))}
/* Ikon menu */
.hzh-mi--circle .hzh-menu>li>a::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--hzh-m-ic,currentColor);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23fff'/%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23fff'/%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/100% no-repeat;-webkit-mask-source-type:luminance;mask-mode:luminance}
.hzh-mi--dot .hzh-menu>li>a::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--hzh-m-ic,var(--hzh-acc))}
.hzh-mi--chevron .hzh-menu>li>a::after{content:"";flex:none;width:5px;height:5px;margin:-3px 0 0 2px;border:solid var(--hzh-m-ic,currentColor);border-width:0 2px 2px 0;transform:rotate(45deg)}
/* Submenu */
.hzh-menu .sub-menu,.hzh-menu .children{position:absolute;left:0;top:100%;z-index:70;display:none;min-width:200px;padding:6px 0;background:var(--hzh-d-bg);border:1px solid var(--hzh-d-line);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.hzh-menu li:hover>.sub-menu,.hzh-menu li:focus-within>.sub-menu,.hzh-menu li:hover>.children,.hzh-menu li:focus-within>.children{display:block}
.hzh-menu .sub-menu a,.hzh-menu .children a{display:block;padding:8px 16px;font-size:13px;color:var(--hzh-d-text)}

/* HP / tablet kecil: burger, menu laci, pencarian satu baris penuh. Dihitung dari lebar header (container query). */
@container hzh (max-width:782px){
	.hzh .hzh-brand-in,.hzh.hzh--logocenter .hzh-brand-in{display:flex;flex-wrap:wrap;gap:12px 16px;padding-top:min(var(--hzh-pt,22px),16px);padding-bottom:min(var(--hzh-pb,22px),16px)}
	.hzh .hzh-burger,.hzh.hzh--logocenter .hzh-burger{display:block;order:1}
	.hzh .hzh-logo,.hzh.hzh--logocenter .hzh-logo{order:2;flex:1;align-items:flex-start}
	.hzh .hzh-account,.hzh.hzh--logocenter .hzh-account{order:3;margin-left:0}
	.hzh.hzh-a--link .hzh-account span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
	.hzh .hzh-search,.hzh.hzh--logocenter .hzh-search{order:4;flex:0 0 100%;max-width:none;width:100%;margin:0}
	.hzh.hzh-s--icon .hzh-search{flex:0 0 auto;width:auto}
	.hzh-datetime .hzh-sep,.hzh-datetime .hzh-clock{display:none}
	.hzh .hzh-menu{flex-direction:column}
	.hzh .hzh-menu>li>a{padding:12px 4px;border-bottom:1px solid var(--hzh-line,var(--hzh-d-line))}
	.hzh .hzh-menu .sub-menu,.hzh .hzh-menu .children{position:static;display:block;border:0;box-shadow:none;padding:0 0 0 18px;background:transparent}
	.hzh-logo-text{font-size:min(var(--hzh-logo-fs,32px),28px)}
}
@media (max-width:782px){
	.admin-bar .hzh--sticky-nav:not(.hzh--preview) .hzh-nav,.admin-bar .hzh--sticky-all:not(.hzh--preview){top:46px}
	.hzh:not(.hzh--preview) .hzh-nav{display:none;position:static!important}
	.hzh:not(.hzh--preview) .hzh-nav.is-open{display:block}
}
.hzh--compact .hzh-nav{display:none}

/* Pratinjau di editor: tidak menempel, gaya diatur editor */
.hzh--preview{position:relative!important;top:auto!important}
@media (prefers-reduced-motion:reduce){.hzh-mode-knob{transition:none}}