/* Bar menu iCalfixit bersama. Pasang di semua halaman:
   <link rel="stylesheet" href="https://www.icalfixit.com/bar.css"><script src="https://www.icalfixit.com/bar.js" defer></script> */
#bar,#bar *{box-sizing:border-box}
body.ada-bar{padding-top:50px}
#bar header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(0,0,0,.8);box-shadow:0 0 5px rgba(0,0,0,.5);height:50px;font:16px/1.7 "Helvetica Neue",Helvetica,Arial,sans-serif}
#bar header .in{max-width:1200px;margin:0 auto;height:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 16px}
#bar .logo{display:flex;align-items:center}
#bar .logo img{height:19px;width:auto;margin-right:18px;position:relative;top:-4px;display:block}
#bar nav{display:flex;align-items:center;gap:1px}
#bar nav a,#bar nav .dd>button{color:#e5e5e5;text-decoration:none;font-size:14px;font-weight:300;padding:6px 20px;background:none;border:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;cursor:pointer;line-height:17px}
#bar nav a:hover,#bar nav .dd>button:hover{color:#fff}
#bar nav a.cek{background:#7cc4dc;color:#000;border-radius:9px;margin-left:6px;padding:6px 12px}
#bar nav a.cek:hover{color:#000;background:#92d2e6}
#bar .dd{position:relative}#bar .dd .sub{display:none;position:absolute;top:36px;left:0;background:rgba(27,27,27,.96);min-width:150px;padding:6px;border-radius:8px}
#bar .dd.buka .sub{display:block}#bar .dd .sub a{display:block;padding:8px 12px}
#bar .menubtn{display:none;background:none;border:0;color:#fff;padding:0;width:44px;height:44px;cursor:pointer}
#bar .menubtn svg,#bar .cekicon svg{width:28px;height:28px;display:block;margin:auto}
#bar .cekicon{display:none;color:#fff;width:44px;height:44px;place-items:center;justify-self:end}
@media(max-width:760px){
 body.ada-bar{padding-top:66px}
 #bar header{height:66px;background:#000;transition:background .25s}
 html.geser #bar header{background:rgba(0,0,0,.8)}
 html.geser #bar nav{background:rgba(0,0,0,.8)}
 #bar header .in{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:0 14px;max-width:none}
 #bar .menubtn{display:block;grid-column:1;grid-row:1}#bar .cekicon{display:grid;grid-column:3;grid-row:1}
 #bar .logo{justify-content:center;grid-column:2;grid-row:1}#bar .logo img{margin:0;height:26px;top:-3px}
 #bar nav{display:none;position:absolute;top:66px;left:0;right:0;background:#000;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 18px;max-height:calc(100vh - 66px);overflow:auto}
 #bar nav.open{display:flex}
 #bar nav a,#bar nav .dd>button{font-size:17px;font-weight:300;padding:13px 26px;text-align:left;color:#fff}
 #bar .dd{display:contents}#bar .dd>button{display:none}#bar .dd .sub{display:contents}#bar .dd .sub a{padding:13px 26px}
 #bar nav a[href$="#/2"]{order:1}#bar nav a[href$="#/1"]{order:2}#bar nav a[href$="#/3"]{order:3}#bar nav a[href$="#/4"]{order:4}#bar nav a[href$="#/6"]{order:5}#bar nav a[href$="#/5"]{order:6}#bar nav a[href$="#/7"]{order:7}#bar nav a[href$="/aksesoris"]{order:8}#bar nav a[href$="/second"]{order:9}#bar nav a[href$="/blog/"]{order:10}
 #bar nav a.cek{order:11;margin:12px 26px 0;text-align:center;border-radius:12px;padding:12px}
}